<template>
<div class="wrapper">
    <div v-if="web" class="header">
        <text class="header-text">上海卓顾信息科技有限公司</text>
        <div class="back-area" @click="back">
            <image class="back" :src="getUrl('image/back.png')"/>
        </div>
    </div>
    <scroller class="main" v-if="chartOrform" :show-scrollbar="false">
        <div class='left_money'>
            <div class='left_money_item'>
                <text class='left_money_item_spot'></text>
                <text class='left_money_item_text'>现金净增加额（本月）</text>
                <text class='left_money_item_money'>50,000.00</text>
            </div>
            <div class='left_money_item'>
                <text class='left_money_item_spot'></text>
                <text class='left_money_item_text'>期初现金余额（本月）</text>
                <text class='left_money_item_money'>50,000.00</text>
            </div>
            <div class='left_money_item'>
                <text class='left_money_item_spot'></text>
                <text class='left_money_item_text'>期末现金余额（本月）</text>
                <text class='left_money_item_money'>50,000.00</text>
            </div>
        </div>
        
        <div class='amount'>
            <div class='amount_item'>
                <text class='amount_item_title'>经营活动产生的现金流量净额</text>
                <div class='mount_item_parts'>
                    <div class='name'>收</div>
                    <div class='num'>
                        <text class='num_bg'> 213,270.00</text>
                        <text class='num_progress in'> 213,270.00</text>
                    </div>
                </div>
                <div class='mount_item_parts'>
                    <div class='name'>支</div>
                    <div class='num'>
                        <text class='num_bg'>38,000.00</text>
                        <text class='num_progress out'>38,000.00</text>
                    </div>
                </div>
                <div class='mount_item_parts'>
                    <div class='name'>净额</div>
                    <div class='num'>
                        <text style='font-weight:bold;font-size:28px'>174,470.00</text>
                    </div>
                </div>
            </div>

            <div class='amount_item'>
                <text class='amount_item_title'>投资活动产生的现金流量净额</text>
                <div class='mount_item_parts'>
                    <div class='name'>收</div>
                    <div class='num'>
                        <text class='num_bg'>0.00</text>
                        <text class='num_progress in' style="width:0;">0.00</text>
                    </div>
                </div>
                <div class='mount_item_parts'>
                    <div class='name'>支</div>
                    <div class='num'>
                        <text class='num_bg'>0.00</text>
                        <text class='num_progress out' style="width:0;">0.00</text>
                    </div>
                </div>
                <div class='mount_item_parts'>
                    <div class='name'>净额</div>
                    <div class='num'>
                        <text style='font-weight:bold;font-size:28px'>174,470.00</text>
                    </div>
                </div>
            </div>

            <div class='amount_item'>
                <text class='amount_item_title'>筹资活动产生的现金流量净额</text>
                <div class='mount_item_parts'>
                    <div class='name'>收</div>
                    <div class='num'>
                        <text class='num_bg'>0.00</text>
                        <text class='num_progress in' style="width:0;">0.00</text>
                    </div>
                </div>
                <div class='mount_item_parts'>
                    <div class='name'>支</div>
                    <div class='num'>
                        <text class='num_bg'>0.00</text>
                        <text class='num_progress out' style="width:0;">0.00</text>
                    </div>
                </div>
                <div class='mount_item_parts'>
                    <div class='name'>净额</div>
                    <div class='num'>
                        <text style='font-weight:bold;font-size:28px'>174,470.00</text>
                    </div>
                </div>
            </div>
        </div>
    </scroller>

    <scroller class="main" v-if="!chartOrform" :show-scrollbar="false">
        <div class='title'>
            <text class="titleText">现金流量表</text>
            <text class='button'>下载</text>
        </div>
        <div class='group' v-for="item in cashList" :key='item.id'>
            <div class='item item-h1' v-if="item.row===null">
                <text class="item-h1-text">{{item.item}}</text>
            </div>
            <div class='item item-title' v-if="item.row!==null">
                <div class="row rownum">{{item.row==null?'':item.row}}：</div>
                <text class="num">{{item.item}}</text>
            </div>
            <div class='item' v-if="item.row!==null">
                <div class="row">本年累计金额：</div>
                <text :class="['num','rightBold',item.yearCashBD < 0 ? 'red' : '']">{{item.yearCashBD}}</text>
            </div>
            <div class='item' v-if="item.row!==null"> 
                <div class="row">本月金额：</div>
                <text :class="['num','rightBold',item.monthCashBD < 0 ? 'red' : '']">{{item.monthCashBD}}</text>
            </div>
        </div>
    </scroller>

    <div class='fixed_button' @click="swich">
        <image v-if="chartOrform" class='fixed_img' :src="getUrl('image/form.png')"/>
        <image v-else class='fixed_img' :src="getUrl('image/chart.png')"/>
        <text class='fixed_text'>{{fixedText}}</text>
    </div>
</div>
</template>

<script>
export default {
    data () {
        return {
            web: false,
            chartOrform:true,
            fixedText:'列表',
            cashList: [{
      "id": 32,
      "code": "1001",
      "item": "一、经营活动产生的现金流量：",
      "row": null,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 1,
      "yearCashBD": 0,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 33,
      "code": "100101",
      "item": "\t销售产成品、商品、提供劳务收到的现金",
      "row": 1,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 2,
      "yearCashBD": 131400.00,
      "monthCashBD": 49000.00,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 34,
      "code": "100102",
      "item": "\t收到其他与经营活动有关的现金",
      "row": 2,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 3,
      "yearCashBD": 11100.00,
      "monthCashBD": 11100.00,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 35,
      "code": "100103",
      "item": "\t购买原材料、商品、接受劳务支付的现金",
      "row": 3,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 4,
      "yearCashBD": 290266.00,
      "monthCashBD": 290266.00,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 36,
      "code": "100104",
      "item": "\t支付的职工薪酬",
      "row": 4,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 5,
      "yearCashBD": 8000.00,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 37,
      "code": "100105",
      "item": "\t支付的税费",
      "row": 5,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 6,
      "yearCashBD": 8500.00,
      "monthCashBD": 8500.00,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 38,
      "code": "100106",
      "item": "\t支付其他与经营活动有关的现金",
      "row": 6,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 7,
      "yearCashBD": 12030.00,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 39,
      "code": "100107",
      "item": "\t经营活动产生的现金流量净额",
      "row": 7,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 8,
      "yearCashBD": -176296.00,
      "monthCashBD": -238666.00,
      "lyearCashBD": 0.00,
      "formula": "{\"add\":[\"1\",\"2\"],\"sub\":[\"3\",\"4\",\"5\",\"6\"]}",
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 40,
      "code": "1002",
      "item": "二、投资活动产生的现金流量：",
      "row": null,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 9,
      "yearCashBD": 0,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 41,
      "code": "100201",
      "item": "\t收回短期投资、长期债券投资和长期股权投资收到的现金",
      "row": 8,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 10,
      "yearCashBD": 0,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 42,
      "code": "100202",
      "item": "\t取得投资收益收到的现金",
      "row": 9,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 11,
      "yearCashBD": 0,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 43,
      "code": "100203",
      "item": "\t处置固定资产、无形资产和其他非流动资产收回的现金净额",
      "row": 10,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 12,
      "yearCashBD": 0,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 44,
      "code": "100204",
      "item": "\t短期投资、长期债券投资和长期股权投资支付的现金",
      "row": 11,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 13,
      "yearCashBD": 0,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 45,
      "code": "100205",
      "item": "\t购建固定资产、无形资产和其他非流动资产支付的现金",
      "row": 12,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 14,
      "yearCashBD": 0,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 46,
      "code": "100206",
      "item": "\t投资活动产生的现金流量净额",
      "row": 13,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 15,
      "yearCashBD": 0,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": "{\"add\":[\"8\",\"9\",\"10\"],\"sub\":[\"11\",\"12\"]}",
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 47,
      "code": "1003",
      "item": "三、筹资活动产生的现金流量：",
      "row": null,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 16,
      "yearCashBD": 0,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 48,
      "code": "100301",
      "item": "\t取得借款收到的现金",
      "row": 14,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 17,
      "yearCashBD": 0,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 49,
      "code": "100302",
      "item": "\t吸收投资者投资收到的现金",
      "row": 15,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 18,
      "yearCashBD": 100000.00,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 50,
      "code": "100303",
      "item": "\t偿还借款本金支付的现金",
      "row": 16,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 19,
      "yearCashBD": 0,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 51,
      "code": "100304",
      "item": "\t偿还借款利息支付的现金",
      "row": 17,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 20,
      "yearCashBD": 0,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 52,
      "code": "100305",
      "item": "\t分配利润支付的现金",
      "row": 18,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 21,
      "yearCashBD": 0,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": null,
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 53,
      "code": "100306",
      "item": "\t筹资活动产生的现金流量净额",
      "row": 19,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 22,
      "yearCashBD": 100000.00,
      "monthCashBD": 0,
      "lyearCashBD": 0.00,
      "formula": "{\"add\":[\"14\",\"15\"],\"sub\":[\"16\",\"17\",\"18\"]}",
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 54,
      "code": "1004",
      "item": "四、现金净增加额",
      "row": 20,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 23,
      "yearCashBD": -76296.00,
      "monthCashBD": -238666.00,
      "lyearCashBD": 0.00,
      "formula": "{\"add\":[\"7\",\"13\",\"19\"],\"sub\":[]}",
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 55,
      "code": "1005",
      "item": "加：期初现金余额",
      "row": 21,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 24,
      "yearCashBD": 0.00,
      "monthCashBD": 162370.00,
      "lyearCashBD": 0.00,
      "formula": "{\"nos\":[\"1001\",\"1002\",\"1012\"]}",
      "initbalance": 0.00,
      "isInit": null
    }, {
      "id": 56,
      "code": "1006",
      "item": "五、期末现金余额",
      "row": 22,
      "fold": null,
      "foldFlag": null,
      "rowIndex": 25,
      "yearCashBD": -76296.00,
      "monthCashBD": -76296.00,
      "lyearCashBD": 0.00,
      "formula": "{\"add\":[\"20\",\"21\"],\"sub\":[]}",
      "initbalance": 0.00,
      "isInit": null
    }]
        }
    },
    created(){
        let platform = weex.config.env.platform;
        this.web = platform.toLowerCase()!=='web'?false:true;
    },
    methods:{
        getUrl(param){
            let bundleUrl = weex.config.bundleUrl; 
            bundleUrl = new String(bundleUrl); 
            let platform = weex.config.env.platform;
            var nativeBase;  
            var native;   

            nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1)
            native = nativeBase.replace('components/','') + 'assets/' + param;
            
            return native;  
        },
        back(){
            var navigator = weex.requireModule('navigator')
            navigator.pop()
        },
        swich(){
            if (this.chartOrform){
                this.chartOrform = false;
                this.fixedText = '图表'
            }else{
                this.chartOrform = true;
                this.fixedText = '列表'
            }
        }
    }
    
}
</script>

<style scoped>
.wrapper{
    background-color: #f5f5f5;
}
.header{
    height: 90px;
    width: 750px;
    background-color: #ffffff;
}
.header-text{
    height: 90px;
    line-height: 90px;
    text-align: center;
}
.back-area{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 20px;
    top: 20px;
    align-items: center;
    justify-content: center;
}
.back{
    width: 30px;
    height: 30px;
}
.main{
    flex: 1;
}

.left_money{
  height: 270px;
  border-top-width: 2px;
  border-top-color:  #eeeeee;
  background-color: #ffffff;
  margin-bottom: 20px;
}
.left_money_item{
  height: 90px;
  line-height: 90px;
  flex-direction: row;
  align-items: center;
}
.left_money_item_spot{
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #16cdef;
  margin-left: 30px;
  margin-right: 10px;
}
.left_money_item_text{
    flex: 1;
    font-weight: bold;
    font-size: 30px;
}
.left_money_item_money{
  text-align: right;
  padding-right: 20px;
  font-size: 30px;
}

.amount{
  background-color: #ffffff;
}
.amount_item{
  height: 330px;
  border-bottom-width: 2px;
  border-bottom-color:  #eeeeee;
}
.amount_item_title{
  height: 100px;
  line-height: 100px;
  font-weight: bold;
  font-size: 30px;
  padding-left:20px;
}
.mount_item_parts{
  flex-direction: row;
  height: 64px;
  align-items: center;
}
.name{
  width: 130px;
  background-color: #f5f5f5;
  height: 40px;
  justify-content: center;
  align-items: center;
  margin-left:20px; 
  border-radius: 20px;
  font-size: 26px;
  color: #626262;
}
.num{
  width: 550px;
  height: 40px;
  margin-left:20px; 
  margin-right:20px; 
}
.num_bg{
  position:absolute;
  left: 0;
  top: 0;
  width: 550px;
  height: 40px;
  line-height: 44px;
  font-size: 26px;
  border-radius:20px;
  background-color: #f5f5f5;
  color: #3b312f;
}
.num_progress{
  position:absolute;
  left: 0;
  top: 0;
  height: 40px;
  line-height: 44px;
  font-size: 26px;
  border-radius:20px;
  color: #ffffff;
}
.in{
  background-color: #8ed231;
  width: 550px;
}
.out{
  width: 100px;
  background-color: #00cadc;
}












.income_items{
  height: 120px;
  background-color: #ffffff;
  border-bottom-width: 2px ;
  border-bottom-color:#f7f7f7;
  flex-direction: row;
  align-items: center;
}
.in_img{
  width: 80px;
  height: 80px;
  margin-left: 20px;
  margin-right: 20px;
}
.text{
  width: 200px;
  font-size:32px;
}
.money{
  flex: 1;
    font-size:30px;
  font-weight:bold;
  text-align: right;
  margin-right: 10px;
}
.in_enter{
  width: 50px;
  height: 50px;
  margin-right: 20px;
}

.fixed_button{
  position: fixed;
  right: 0;
  top: 850px;
  width: 110px;
  height: 90px;
  background-color: #42c5e1;
  border-bottom-left-radius: 45px;
  border-top-left-radius: 45px;
}
.fixed_img{
  width: 50px;
  height: 50px;
  border-radius:25px;
  position: absolute;
  left: 16px;
  top: 20px; 
}
.fixed_text{
  position: absolute;
  right: 15px;
  width: 20px;
  height: 90px;
  font-size: 20px;
  line-height: 25px;
  padding-top: 20px;
  color: #ffffff;
}

.title{
  height:70px;
  background-color: #ffffff;
}
.titleText{
    flex: 1;
    height:70px;
    text-align:center;
    font-size:34px;
    line-height:70px;
    font-weight: bold;
}
.button{
  position: absolute;
  right: 20px;
  top: 8px;
  text-align:center;
  width: 100px;
  height: 54px;
  line-height:54px;
  font-size:28px;
  border-radius: 5px;
  background-color: #94cf28;
  color: #ffffff;
}

.group{
  border-top-width: 2px;
  border-top-color: #dddddd; 
  margin-bottom: 20px;
}

.item{
  height: 70px;
  border-bottom-width: 2px;
  border-bottom-color: #dddddd; 
  background-color: #ffffff;
  flex-direction: row;
  align-items: center;
}
.item-h1{
  background-color: #3ac7d9;
}
.item-h1-text{
    color: #ffffff;
    padding-left: 20px;
    font-size: 26px;
    font-weight: bold;
}
.item-title{
  background-color: #defcfe;
}
.row{
    /* width: 300px; */
    padding-left:20px; 
    color: #5c5c5c;
    font-size: 26px;
}
.rownum{
    width: 80px;
}
.num{
    flex: 1;
    text-align: right;
    color: #5c5c5c;
    font-size: 26px;
    padding-right:20px; 
}
.rightBold{
    font-weight: bold;
}
.red{
  color: #FF0000;
}
</style>
